<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript and HTML Thumbnail Image Scroller Example</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
<!-- 
    1 ) Reference to the file containing the javascript. 
    This file must be located on your server. 
	2 ) Add this code to google SVN
	3 ) Already Sync to SVN Google
-->

<script type="text/javascript" src="highslide/highslide.js"></script>


<!-- 
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">    
// remove the registerOverlay call to disable the close button
hs.registerOverlay({
	overlayId: 'closebutton',
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.graphicsDir = 'highslide/graphics/';
</script>
<!-- Add Comments -->
</head>
<body>

    <script type="text/javascript" src="thumbscroller.js"></script>

    <table cellpadding="0" cellspacing="0">
        <tr valign="top">
            <td>
                <a id="isFlowersFirstButton" href="javascript:isFlowers.scrollTop();">
                    <img src="first.gif" style="margin-top: 12px;
                        margin-right: 6px;" alt="See previous images" style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <a id="isFlowersPreviousButton" href="javascript:isFlowers.scrollDown();">
                    <img src="rewind.gif" alt="See previous images"
                        style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <div id="isFlowersFrame" name="isFlowersFrame" style="margin: 0px; padding: 0px;
                    position: relative; overflow: hidden;">
                    <div id="isFlowersImageRow" name="isFlowersImageRow" style="position: absolute; top: 0px;
                        left: 0px;">
                        <script type="text/javascript">
							var isFlowers = new ImageScroller("isFlowersFrame", "isFlowersImageRow");
							    //**    [begin] Modify these to change your images  **//
								isFlowers.addThumbnail("images/flower_1_thmb.jpg", "images/flower_1_full.jpg", "Screen Shot 1", " Screen Shot 1 Description.", "return hs.expand(this)","highslide");
								isFlowers.addThumbnail("images/flower_2_thmb.jpg", "images/flower_2_full.jpg", "Screen Shot 2", " Screen Shot 2 Description.", "return hs.expand(this)","highslide");
								isFlowers.addThumbnail("images/flower_3_thmb.jpg", "images/flower_3_full.jpg", "Screen Shot 3", " Screen Shot 3 Description.", "return hs.expand(this)","highslide");
								isFlowers.addThumbnail("images/flower_4_thmb.jpg", "images/flower_4_full.jpg", "Screen Shot 4", " Screen Shot 4 Description.", "return hs.expand(this)","highslide");
								isFlowers.addThumbnail("images/flower_5_thmb.jpg",  "images/flower_5_full.jpg", "Screen Shot 5", " Screen Shot 5 Description.", "return hs.expand(this)","highslide");
								isFlowers.addThumbnail("images/flower_6_thmb.jpg", "images/flower_6_full.jpg", "Screen Shot 6", " Screen Shot 6 Description.", "return hs.expand(this)","highslide");
								//**    [end]   Modify these to change your images  **//								
								isFlowers.setThumbnailHeight(128);
								isFlowers.setThumbnailWidth(96);
								isFlowers.setThumbnailPadding(3);
								isFlowers.setScrollType(1);
								isFlowers.enableThumbBorder(false);
								isFlowers.setClickOpenType(1);
								isFlowers.setThumbsShown(3);
								isFlowers.setNumOfImageToScroll(1);
								isFlowers.renderScroller();
                        </script>

                    </div>
                </div>
            </td>
            <td>
                <a id="isFlowersNextButton" href="javascript:isFlowers.scrollUp();">
                    <img src="forward.gif" alt="See next images"
                        style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <a id="isFlowersLastButton" href="javascript:isFlowers.scrollBottom();">
                    <img src="last.gif" style="margin-top: 12px;
                        margin-left: 6px;" alt="See next images" style="margin-top: 3px;" border="0" /></a>
            </td>
        </tr>
    </table>
</body>
</html>
